<script setup lang="tsx">
import { reactive, ref } from 'vue'
import JmpTimeRange from '@/components/time-range'
import Bar from './components/bar-chart.vue'
import Map from './components/mapView.vue'
import foreInfo from './components/fore-info.vue'
import loopList from './components/loop-list.vue'

import TimeSelect from '../utilView/TimeSelect.vue'

const mapRef = ref()
const barRef = ref()
const province = ref()
const ruleForm = reactive({
  creatBeginTime: '',
  createEndTime: ''
})
// 漏洞详情标题显示
const name = ref('')
const getItem = (value: any) => {
  if(value){
    const { vulName, cve } = value
    name.value = vulName
    mapRef.value.show(cve)
  }
}
// 地图点击 value:国家
const handleUpdate = (value: string) => {
  barRef.value.show(value)
}
// 柱状图点击 value:省份
const handListupdata = (value: string) => {
  console.log(value)
  // province.value = 'ssh'
  province.value = value
}

</script>
<template>
  <div class="jm-mainbox">
    <div class="flex justify-between jm-mb jm-bg-color p2">
      <!-- 利用空盒布局 -->
      <div></div>
      <!-- 时间 -->
      <div>
        <jm-form ref="formRef" label-width="auto" :model="ruleForm" :inline="true">
          <jm-form-item label="选择时间：" prop="creatBeginTime" style="margin:0">
            <!-- <jmp-time-range
              v-model:creatBeginTime="ruleForm.creatBeginTime"
              v-model:createEndTime="ruleForm.createEndTime"
              style="width: 23.75rem"
            /> -->
            <TimeSelect v-model:start-time="ruleForm.creatBeginTime" v-model:end-time="ruleForm.createEndTime"></TimeSelect>
          </jm-form-item>
        </jm-form>
      </div>
    </div>
    <div class="jm-bg-color jm-container">
      <!-- 漏洞列表\详情 -->
      <div class="chart-item">
        <div class="chart-name text-color-danger">{{ name }}</div>
        <div class="chart-box">
          <fore-info @handClick="getItem" v-model:time="ruleForm" />
        </div>
      </div>
      <!-- 地图 -->
      <div class="chart-item">
        <div class="chart-name">漏洞全球影响范围</div>
        <div class="chart-box">
          <Map ref="mapRef" @update="handleUpdate" v-model:time="ruleForm" />
        </div>
      </div>
      <!-- 柱状图 -->
      <div class="chart-item">
        <div class="chart-name">受影响省份地区TOPN</div>
        <div class="chart-box">
          <Bar ref="barRef" @upBardate="handListupdata" v-model:time="ruleForm" />
        </div>
      </div>
      <!-- 设备表 -->
      <div class="chart-item">
        <div class="chart-name">存在漏洞设备列表</div>
        <div class="chart-box">
          <loop-list v-model:province="province" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped src="./mixin/css/index.scss"></style>
